<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Forums</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/swiper-bundle.min.css">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet/less" href="css/reset.less">
		<link rel="stylesheet/less" href="css/index.less">
		<link rel="stylesheet/less" href="css/game.less">
		<link rel="stylesheet/less" href="css/forums.less">
	</head>
	<body>
		<header>
			<div class="logn">
				<img src="img/Logo.jpg" />
			</div>
			<div class="nav">
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="game.html">Games</a></li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="forums.html">Forums</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</div>
			<div class="login">
				<a href="#">login/sign</a>
			</div>
		</header>
		<div class="dh">
			<div class="dh-left">
				Latest News
			</div>
			<div class="dh-right">
				<div class="dh-title">
					<div class="dh-item">
						<span class="new">new</span>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					</div>
					<div class="dh-item">
						<span class="new">new</span>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					</div>
					<div class="dh-item">
						<span class="new">new</span>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					</div>
				</div>
			</div>
		</div>

		<div class="forums-container">
			<div class="forums-cont">
				<div class="rows">
					<div class="rows-left">All Members (344)</div>
					<div class="rows-right">
						<label for="select">Show</label>
						<select id="select">
							<option value="#">Very Good</option>
							<option value="#">Very Good</option>
							<option value="#">Very Good</option>
						</select>
					</div>
				</div>
				<ul class="for-list">
					<li>
						<div class="for-item">
							<div class="author" style="background: url(img/tx.jpg);background-size: 100%;"></div>
							<div class="for-text">
								<h4>James Smith
									<span>posted an update</span>
								</h4>
								<div class="text-date">June 21, 2022</div>
								<p>Lorem ipsum dolor sit amet, cdictum nisl onsectetur adipisc ing ipsum dolor sit ame.
									Lorem ipsum dolor sit amet, consectetur adipisc ing ipsum dolor sit ame.Donec
									venenatis at eros sit amet aliquam. Donec vel orci efficitur, dictum nisl vitae,
									scelerisque nibh. Curabitur eget ipsum pulvinar nunc gravida interdum. </p>
							</div>
						</div>
					</li>
					<li>
						<div class="for-item">
							<div class="for-text">
								<h4>Partik Williams
									<span>posted an update</span>
								</h4>
								<div class="text-date">June 21, 2022</div>
								<p>Lorem ipsum dolor sit amet, cdictum nisl onsectetur adipisc ing ipsum dolor sit ame.
									Lorem ipsum dolor sit amet, consectetur adipisc ing ipsum dolor sit ame.Donec
									venenatis at eros sit amet aliquam. Donec vel orci efficitur, dictum nisl vitae,
									scelerisque nibh. Curabitur eget ipsum pulvinar nunc gravida interdum. </p>
								<div class="file"><img src="img/tp.jpg"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="for-item">
							<div class="author" style="background: url(img/tx2.jpg);background-size: 100%;"></div>
							<div class="for-text">
								<h4>Cris The Man
									<span>posted an update</span>
								</h4>
								<div class="text-date">June 21, 2022</div>
								<p>Lorem ipsum dolor sit amet, cdictum nisl onsectetur adipisc ing ipsum dolor sit ame.
									Lorem ipsum dolor sit amet, consectetur adipisc ing ipsum dolor sit ame.Donec
									venenatis at eros sit amet aliquam. Donec vel orci efficitur, dictum nisl vitae,
									scelerisque nibh. Curabitur eget ipsum pulvinar nunc gravida interdum. </p>
							</div>
						</div>
					</li>
					<li>
						<div class="for-item">
							<div class="author" style="background: url(img/tx3.jpg);background-size: 100%;"></div>
							<div class="for-text">
								<h4>Maria Doe
									<span>posted an update</span>
								</h4>
								<div class="text-date">June 21, 2022</div>
								<p>Lorem ipsum dolor sit amet, cdictum nisl onsectetur adipisc ing ipsum dolor sit ame.
									Lorem ipsum dolor sit amet, consectetur adipisc ing ipsum dolor sit ame.Donec
									venenatis at eros sit amet aliquam. Donec vel orci efficitur, dictum nisl vitae,
									scelerisque nibh. Curabitur eget ipsum pulvinar nunc gravida interdum. </p>
							</div>
						</div>
					</li>
				</ul>
				
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
						</li>
						<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li>
							<a href="#" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>

		<div class="section">
			<div class="section-container">
				<div class="s-img"><img src="img/s-bj.png"/></div>
				<div class="row">
					<div class="col-lg-4">
						<div class="text-white">
							<img src="img/log.png"/>
							<p>Lorem ipsum dolor sit amet, consectetur adipisc ing ipsum dolor sit ame.</p>
						</div>
					</div>
					<div class="col-lg-4 col-md-6">
						<div class="section-item">
							<h4>Latest Posts</h4>
							<div class="section-log">
								<div class="log-item">
									<div class="log-item-img" style="background-image: url(img/lg1.jpg);background-size: 100%;"></div>
									<div class="log-item-content">
										<div class="log-date">June 21, 2022</div>
										<p>Lorem ipsum dolor sit amet, ing ipsum </p>
										<a href="#">By Admin</a>
									</div>
								</div>
								<div class="log-item">
									<div class="log-item-img" style="background-image: url(img/lg2.jpg);background-size: 100%;"></div>
									<div class="log-item-content">
										<div class="log-date">June 21, 2022</div>
										<p>Lorem ipsum dolor sit amet, ing ipsum </p>
										<a href="#">By Admin</a>
									</div>
								</div>
								<div class="log-item">
									<div class="log-item-img" style="background-image: url(img/lg3.jpg);background-size: 100%;"></div>
									<div class="log-item-content">
										<div class="log-date">June 21, 2022</div>
										<p>Lorem ipsum dolor sit amet,  ing ipsum </p>
										<a href="#">By Admin</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-md-6">
						<div class="section-item">
							<h4>Top Comments</h4>
							<div class="section-comment">
								<div class="tc-item">
									<div class="tc-img" style="background-image: url(img/tx.jpg);background-size: 100%;"></div>
									<div class="tc-content">
										<p>
											<a href="#">James Smith</a>
											<span>on</span>
											  Lorem ipsum dolor sit amet, co
										</p>
										<div class="tc-date">June 21, 2022</div>
									</div>
								</div>
								<div class="tc-item">
									<div class="tc-img" style="background-image: url(img/tx2.jpg);background-size: 100%;"></div>
									<div class="tc-content">
										<p>
											<a href="#">James Smith</a>
											<span>on</span>
											  Lorem ipsum dolor sit amet, co
										</p>
										<div class="tc-date">June 21, 2022</div>
									</div>
								</div>
								<div class="tc-item">
									<div class="tc-img" style="background-image: url(img/tx3.jpg);background-size: 100%;"></div>
									<div class="tc-content">
										<p>
											<a href="#">James Smith</a>
											<span>on</span>
											  Lorem ipsum dolor sit amet, co
										</p>
										<div class="tc-date">June 21, 2022</div>
									</div>
								</div>
								<div class="tc-item">
									<div class="tc-img" style="background-image: url(img/tx4.jpg);background-size: 100%;"></div>
									<div class="tc-content">
										<p>
											<a href="#">James Smith</a>
											<span>on</span>
											  Lorem ipsum dolor sit amet, co
										</p>
										<div class="tc-date">June 21, 2022</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="footer">
			<p>Copyright © 2022.Company name All rights reserved.<a href="#">HDM</a></p>
			<ul>
				<li><a href="contact.html">Contact</a></li>
				<li><a href="forums.html">Forums</a></li>
				<li><a href="blog.html">Blog</a></li>
				<li><a href="game.html">games</a></li>
				<li><a href="index.html">Home</a></li>
			</ul>
		</div>

</html>
<script src="js/common.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- less -->
<script src="js/less.js"></script>
<script>
	var mySwiper = new Swiper('.swiper', {
		loop: true,
		// 如果需要分页器
		pagination: {
			el: '.swiper-pagination',
		},

		// 如果需要前进后退按钮
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},

	})
</script>
